<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 声明式导航 -->
    <router-link to="/login">登录页面</router-link>
    <!-- 显示路由对应组件容器 -->
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.min.js"></script>
  <script>
    const router = new VueRouter({ 
      // routes 指定路由规则数组
      routes:[
        {
          path: '/login',
          component: {
            template: `<div>
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <button @click="login">登录</button>
              </div>`,
            methods: {
              login () {
                // 进行登录
                // 假设登录成功了
                // 跳转到首页
                // 只能通过js的方式进行跳转（编程式导航）
                // vue实例提供了一个对象 $router 
                // $router就是路由实例，提供一个函数 push，可以进行跳转
                this.$router.push('/home')
              }
            }
          }
        },
        {
          path: '/home',
          component: {
            template: `<div>首页</div>`
          }
        }
      ] 
    })
    new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>